<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { timeFormat } from '@/hooks/util'
import * as accountApi from '@/api/account'
import { message } from 'ant-design-vue'

const route = useRoute()

let searchFlag = ref<boolean>(false)

interface Pagination {
  page: number
  pageSize: number
  total: number
  current?: number
}
const pagination = ref<Pagination>({ page: 1, pageSize: 10, total: 0 })
let loading = ref<boolean>(false)

interface SearchParams {
  currentPage: number
  pageSize: number
  wechatId?: string | undefined
  nickName?: string | undefined
  remark?: string | undefined
  robotState?: string | number
}
const searchParams = ref<SearchParams>({
  currentPage: pagination.value.page,
  pageSize: pagination.value.pageSize,
})

const dataSource = ref([])
const columns = [
  {
    title: '头像',
    key: 'avatar',
    width: 60,
  },
  {
    title: '账号信息',
    key: 'wechatAccount',
    width: 200,
  },
  {
    title: '微信状态',
    key: 'wechatState',
    width: 100,
  },
  {
    title: '客户端状态',
    key: 'rebotState',
    width: 100,
  },
  {
    title: '更新状态',
    key: 'updateState',
    width: 100,
  },
  {
    title: '创建/过期时间',
    key: 'createTime',
    width: 180,
  },
  {
    title: '操作',
    key: 'action',
    width: 90,
  },
]

// 表格多选
const selectedRowKey = ref<Array<any>>([])
const selectedRow = ref<Array<object>>([])
const onSelectChange = (selectedRowKeys: any[], selectedRows: any[]) => {
  selectedRowKey.value = selectedRowKeys
  selectedRow.value = selectedRows
}

// 翻页
const changePage = (e: any) => {
  pagination.value.current = e.current
  pagination.value.pageSize = e.pageSize
  searchParams.value.currentPage = pagination.value.current as number
  getList()
}

const getList = async () => {
  loading.value = true
  try {
    let { state, data, message: msg } = await accountApi.getList(searchParams.value)
    if (state === 200) {
      dataSource.value = data.list
      pagination.value.total = Number(data.totalCount)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}

const groupList = ref<SelectProps['options']>([])
const getGroupList = async () => {
  try {
    let { state, data, message: msg } = await accountApi.getWechatRobotGroupList()
    if (state === 200) {
      groupList.value = data
      getList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

onMounted(() => getGroupList())

// 查询
const formRef = ref()
import type { SelectProps } from 'ant-design-vue'
const robotStateList = ref<SelectProps['options']>([
  {
    label: '正常',
    value: 1,
  },
  {
    label: '手动关闭',
    value: 0,
  },
])

interface FormState {
  wechatId?: string | undefined
  nickName?: string | undefined
  remark?: string | undefined
  robotState?: string | number
}
const formState = reactive<FormState>({})
const search = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  formRef.value.validate().then(() => {
    searchParams.value.wechatId = formState.wechatId || ''
    searchParams.value.nickName = formState.nickName || ''
    searchParams.value.remark = formState.remark || ''
    searchParams.value.robotState = formState.robotState
    getList()
  })
}

// 重置
const reset = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  formRef.value.resetFields()
  Reflect.deleteProperty(searchParams.value, 'wechatId')
  Reflect.deleteProperty(searchParams.value, 'nickName')
  Reflect.deleteProperty(searchParams.value, 'remark')
  Reflect.deleteProperty(searchParams.value, 'robotState')
  getList()
}
</script>

<template>
  <page-container :title="route.meta.title">
    <a-card style="overflow-x: scroll">
      <!-- <div class="searchBox">
        <a-form ref="formRef" layout="inline" :model="formState" class="formClass">
          <a-form-item label="微信昵称" name="nickName">
            <a-input v-model:value="formState.nickName" placeholder="微信昵称" />
          </a-form-item>

          <a-form-item label="备注" name="remark">
            <a-input v-model:value="formState.remark" placeholder="备注" style="width: 220px" />
          </a-form-item>

          <a-form-item label="微信ID" v-show="searchFlag" name="wechatId">
            <a-input v-model:value="formState.wechatId" placeholder="微信ID" />
          </a-form-item>

          <a-form-item label="账号状态" v-show="searchFlag" name="robotState">
            <a-select
              v-model:value="formState.robotState"
              placeholder="请选择"
              style="width: 150px"
            >
              <a-select-option
                v-for="(item, index) in robotStateList"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item style="margin-left: -8px">
            <div
              style="
                display: flex;
                align-items: center;
                color: #1890ff;
                justify-content: center;
                margin-left: 8px;
                cursor: pointer;
              "
              @click="() => (searchFlag = !searchFlag)"
            >
              <div style="margin-top: 2px">{{ searchFlag ? '收起' : '展开' }}</div>
              <UpOutlined
                :style="{
                  transform: !searchFlag ? 'rotate(180deg)' : 'rotate(0)',
                  transition: '0.5s',
                  color: '#1890ff',
                  fontSize: '14px',
                  marginLeft: '8px',
                }"
              />
            </div>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" style="border-radius: 6px" @click="search">搜索</a-button>
            <a-button @click="reset" style="border-radius: 6px">重置</a-button>
          </a-form-item>
        </a-form>
      </div>

      <a-table
        style="overflow-x: scroll"
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        :loading="loading"
        @change="changePage"
        rowKey="id"
        :row-selection="{ selectedRowKeys: selectedRowKey, onChange: onSelectChange }"
      >
        <template #emptyText>
          <a-empty description="暂无数据" />
        </template>

        <template #headerCell="{ column }">
          <template v-if="column.key === 'id'">
            <span>id</span>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'id'">
            <div style="width: 150px">{{ record.id }}</div>
          </template>

          <template v-else-if="column.key === 'wechatAccount'">
            <div class="hiddenText">昵称：{{ record.nickName }}</div>
            <div class="hiddenText">微信号：{{ record.wechatAccount }}</div>
            <div class="hiddenText">微信ID：{{ record.wechatId }}</div>
          </template>

          <template v-else-if="column.key === 'avatar'" style="width: 100px">
            <a-popover placement="rightTop">
              <template #content>
                <div class="popoverImg">
                  <img :src="record.avatar" alt="" />
                </div>
              </template>
              <div class="imgBox">
                <img :src="record.avatar" alt="获取失败..." />
              </div>
            </a-popover>
          </template>

          <template v-else-if="column.key === 'createTime'">
            <div v-if="record.createTime.length < 10">-</div>
            <div style="color: #08f72f" v-else>
              {{ timeFormat(record.createTime) }}
            </div>
            <div style="color: red">{{ timeFormat(record.expireTime) }}</div>
            <div>系统编号：{{ record.id }}</div>
          </template>

          <template v-else-if="column.key === 'ip'">
            <div style="width: 180px; text-align: center">{{ record.ip }}</div>
          </template>

          <template v-else-if="column.key === 'rebotState'">
            <a-tag color="blue" v-if="record.robotState == 1">正常</a-tag>
            <a-tag color="red" v-else-if="record.robotState == -1">异常</a-tag>
          </template>

          <template v-else-if="column.key === 'action'">
            <div style="width: 100px; margin: 0; padding: 0">
              <a>充值时长</a>
            </div>
          </template>
        </template>
      </a-table> -->
    
      <h3>正在开发中...</h3>
    </a-card>
  </page-container>
</template>

<style lang="less" scoped>
.formClass {
  :nth-child(1) {
    margin-bottom: 2px;
  }
}

.searchBox {
  margin-bottom: 10px;
  display: flex;

  input {
    width: 200px;
    margin-right: 10px;
  }

  button {
    margin-right: 10px;
  }
}

a:hover {
  color: red;
}

.imgBox {
  width: 50px;
  height: 50px;

  img {
    height: 50px;
  }
}

.popoverImg {
  width: 300px;
  img {
    width: 100%;
  }
}

.robitStatusClass {
  text-align: center;
}
</style>
